<script>
    
    function get_sub_category(id,table,type){
              $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax').'/get_sub_category'); ?>",
                    data: {"category_id": id},
                    dataType: 'json',
                    success: function(data){
                        var tmp = "";
                        switch (type) {
                            case 'add':
                                $.each(data,function(i, index) {
                                tmp  += "<tr>"
                                      + "<td>" + data[i].sub_category_code + "</td>"
                                      + "<td>" + data[i].sub_category_name + "</td>"
                                      + "<td>" + data[i].default_department_m + "</td>"
                                      + "<td>" + data[i].default_assign_to_m + "</td>"
                                      + "<td></td>"
                                      + "</tr>"
                                });
                                break;
                                case 'edit':
                                $.each(data,function(i, index) {
                                tmp  += "<tr>"
                                      + "<td>" + data[i].sub_category_code + "</td>"
                                      + "<td>" + data[i].sub_category_name + "</td>"
                                      + "<td>" + data[i].default_department_m + "</td>"
                                      + "<td>" + data[i].default_assign_to_m + "</td>"
                                      + '<td align="center"><button categoryid="'+ data[i].sub_category_id +'" style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs sub_cat_edit_modal" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button categoryid="'+ data[i].sub_category_id +'" style="margin-left: 2px;" class="btn btn-sm btn-outline btn-danger btn-xs sub_cat_delete_modal" title="View"><i class="fa fa-trash-o fa-lg"></i></button></td>'
                                      + "</tr>"
                                });
                                break;
                            default:
                                // statements_def
                                break;
                        }

                        $(table).html(tmp);
                    }
                });
            }

</script>

<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class=" animate fadeIn">
                                <form id="search_im_category" class="form-horizontal">
                                    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                    </div>
                                       <div class="ibox-content">
                                        <div class="form-group">
                                            <label class="col-lg-5 control-label">Category Code</label>
                                            <div class="col-lg-6 input-s">
                                                <input type="text" placeholder="" name="category_code" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-5 control-label">Category Name</label>
                                            <div class="col-lg-6 input-s">
                                                <input type="text" placeholder="" name="category_name" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                            <div class="col-lg-5">
                                                <a href="javascript:document.getElementById('search_im_case').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                <button id="search-btn" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" > Search
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <button id = "adds" class="btn btn-success btn-md m-t-n-xs add-tab-btn" type="button"> Add</button>
                                </div>
                            </div>
                            <div class="row" id="searchResult" >
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content">
                                        <div class="horizontal-slide">
                                            <table class="dataTables table table-bordered table-hovered table-condense" style="width:100%;">
                                                <thead>
                                                    <tr>
                                                        <th class="no-sort"></th>
                                                        <th>Category Code</th>
                                                        <th>Category Name</th>
                                                        <th>Description</th>
                                                        <th>Default Department</th>
                                                        <th>Default Assign To</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="resultfound" >
                                                    
                                                </tbody>
                                            </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function(){
        var tab = 0;
        $('select').chosen({width : "100%"});
        $('#adds').click(function(){
            $('#notify').text("");
                if($('#count_add').val() == 0){
                    $('#tab-list-2').append('<li id="add-link" class="links"><a id="2nd" data-toggle="tab" href="#add">Add<button id="addX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="add" class="tab-pane"><div class="panel-body"><div id="change2"></div></div></div>');
                    $("#change2").load("<?php echo $this->session->userdata('forload') . '/add_form'; ?>")
                    $('#count_add').val('1');
                    add_action('show'); search_action('close');
                }

        });

        $("#search-btn").click(function(e) {
            e.preventDefault();
            var trHTML='';
            $('#resultfound').html('');
            if(tab == 1){
              $('.dataTables').dataTable().fnDestroy();
            }
            $('#searchResult').show();
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search'); ?>",
                cache: false,
                dataType: 'json',
                data: $("#search_im_category").serialize(),
                success: function(data) {
                    if(data == ""){
                        console.log('error');
                        $('#resultfound').html("<td colspan='10' align='center'><h3>No Result Found</h3></td>");
                        notifymsg("danger","No Result Found");
                    }else{
                        tab = 1;
                        var countData=0;
                        $.each(data, function(i, item) {
                            var label = '';
                            var label2 = '';
                            switch (data[i].case_status) {
                                case 'OPEN':
                                    label = "label-warning";
                                    label2 = "warning";
                                    break;
                                case 'CLOSE':
                                    label = "label-success";
                                    label2 = "success";
                                    break;
                                default:
                                    label = "";
                                    label2 = "";
                                    break;
                            }
                            trHTML += '<tr>' // class="'+ label2 +'"
                                   + '<td align="center" style="text-align:left; padding:2px;"><button caseid="'+ data[i].category_id +'" style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button caseid="'+ data[i].category_id +'" style="margin-left: 2px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td>'
                                   + '<td>' + data[i].category_code + '</td>'
                                   + '<td>' + data[i].category_name + '</td>'
                                   + '<td>' + data[i].description + '</td>'
                                   + '<td>' + data[i].default_department_m + '</td>'
                                   + '<td>' + data[i].default_assign_to_m + '</td>'
                                   + '</tr>';
                            countData++;
                        });
                        $('#resultfound').html(trHTML);
                        $('.dataTables').DataTable( {
                                            "order": [[ 1, "desc" ]],
                                            "columnDefs": [ {
                                              "targets": 'no-sort',
                                              "orderable": false,
                                              } ],
                                              "sDom": 'ltipf'
                                          });
                        notifymsg("success","   . . . Search Success  , Found("+countData+") Item(s)");
                    }
                },
                error: function() {
                },
                complete: function() {
                    $("#search-btn").removeAttr('disabled');
                },
                beforeSend: function(){
                    $("#search-btn").attr('disabled',true);
                }
              });
            });

            $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.edit',function(){
                var id = $(this).attr('caseid');
                if($('#count_edit').val() == 0){
                    $('#tab-list-2').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
                    $("#count_edit").val('1');
                    }
                $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id)
                edit_action('show'); search_action('close');
                notifymsg("hide","hide");
            });

            $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.view',function(){
                var id = $(this).attr('caseid');
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view">View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div id="view" class="tab-pane"><div class="panel-body"><div id="change4"></div></div></div>');
                $("#count_view").val('1');
                }

            

            $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id);
            view_action('show'); search_action('close');
            notifymsg("hide","hide");
            });

    });
</script>